<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,div,ul,li,p{margin:0;padding:0;}
        body{color:#666;font:12px/1.5 Arial;}
        ul{list-style-type:none;}
        #star{position:relative;width:600px;margin:10px auto;}
        #star ul,#star span{float:left;display:inline;height:19px;line-height:19px;}
        #star ul{margin:0 10px;}
        #star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(star.png) no-repeat;}
        #star strong{color:#f60;padding-left:10px;}
        .on{background-position:0 -28px;}
        #star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(icon.gif) no-repeat;padding:7px 10px 0;}
        #star p em{color:#f60;display:block;font-style:normal;}
    </style>
</head>
<body>
<div id="star">
    <span>点击星星就能打分</span>
    <ul>
        <li><a href="javascript:;">1</a></li>
        <li><a href="javascript:;">2</a></li>
        <li><a href="javascript:;">3</a></li>
        <li><a href="javascript:;">4</a></li>
        <li><a href="javascript:;">5</a></li>
    </ul>
    <span></span>
    <p></p>
</div>
</body>
</html>
<script>
    window.onload = function(){
        var aLi = document.querySelectorAll('#star ul li');
        var oP = document.querySelector('p');
        var oSpan = document.querySelectorAll('span')[1];
        //mouseenter改变背景颜色
       aLi[0].addEventListener('mouseover',function(){
           aLi[0].className='on'
    })
//        var aMsg = [
//                '1分',
//                '2分',
//                '3分',
//                '4分',
//                '5分',
//        ]
//
//        for(var i=1;i<=aLi.length;i++){
//            aLi[i-1].index = i;
//            //鼠标放上去的时候
//            aLi[i-1].onmouseover = function(){
//                //每个li的下标是不是从1开始了,为什么？计数方便被
//                show(this.index);
//            }
//            //鼠标移开的时候
//            aLi[i-1].onmouseout = function(){
//                show();
//            }
//            //鼠标点击的时候
//            aLi[i-1].onclick = function(){
//            oP[this.index].style.display='block'
//                for(var i=0;i<aMsg.length;i++) {
//                    aMsg[i].a=i
//                    oP[this.index].innerHTML = aMsg[this.a]
//                }
//            oSpan[i-1]. style.display='block'
//
//            }
//        }
//        function show(a){
//            //接收一下当前要显示多少个星星
//            var index = a;
//            for(var i=0;i<aLi.length;i++){
//                aLi[i].className = i < index ? 'on' : '';
//            }
//        }
//    }
</script>
